<h1>New toilet</h1>

<% form_for(@toilet) do |f| %>
    <%= f.error_messages %>

    <div id="map" style="width: 400px; height: 400px; border: solid; float: left; margin-right: 1em"></div>

    <p>
      <%= f.label :name %><br/>
      <%= f.text_field :name %>
    </p>
    <p>
      <%= f.label :address %><br/>
      <%= f.text_field :address %>
    </p>
      <%= f.hidden_field :long %>
      <%= f.hidden_field :lat %>
    <p>
      <%= f.label :venuetype %><br/>
      <%= f.text_field :venuetype %>
    </p>
    <p>
      <%= f.label :howtoaccess %><br/>
      <%= f.text_field :howtoaccess %>
    </p>
    <p>
      <%= f.label :changingbench %><br/>
      <%= f.text_field :changingbench %>
    </p>
    <p>
      <%= f.label :hoist %><br/>
      <%= f.text_field :hoist %>
    </p>
    <p>
      <%= f.label :toiletlocation %><br/>
      <%= f.text_field :toiletlocation %>
    </p>
    <p>
      <%= f.label :whocanuse %><br/>
      <%= f.text_field :whocanuse %>
    </p>
    <p>
      <%= f.submit "Create" %>
    </p>
<% end %>

<%= link_to 'Back', toilets_path %>


<script type="text/javascript">
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(55.864524,-4.251709), 14 );
    map.addControl(new GMapTypeControl(1));
    map.addControl(new GLargeMapControl());
    map.enableContinuousZoom();
    map.enableDoubleClickZoom();

    var point = new GLatLng(55.864524,-4.251709);
    var markerD2 = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true});
    map.addOverlay(markerD2);
    markerD2.enableDragging();
    GEvent.addListener(markerD2, "drag", function() {
        document.getElementById("toilet_long").value = markerD2.getLatLng().lng();
        document.getElementById("toilet_lat").value = markerD2.getLatLng().lat();
    });

</script>